<template>
  <el-form
    :model="model"
    :inline="inline"
    :label-position="labelPosition"
    :label-width="labelWidth"
    :label-suffix="labelSuffix"
    :hide-required-asterisk="hideRequiredAsterisk"
    :require-asterisk-position="requireAsteriskPosition"
    :show-message="showMessage"
    :inline-message="inlineMessage"
    :status-icon="statusIcon"
    :validate-on-rule-change="validateOnRuleChange"
    :size="size"
    :disabled="disabled"
    :scroll-to-error="scrollToError"
    :scroll-into-view-options="scrollIntoViewOptions"
    ref="formPanelRef"
    :class="formItemWidth === 'auto' ? 'formAuto' : 'form100'"
  >
    <el-row v-if="inline">
      <el-col
        :span="
          item.cols && item.cols != '' ? Number(item.cols) : 24 / Number(cols)
        "
        v-for="(item, index) in formConfig"
        :key="index"
      >
        <!-- input类型 -->
        <el-form-item
          v-if="item.type === 'input' && item.type === 'textarea'"
          :label="item.label"
          :prop="item.fieldName"
          :rules="item.rules ? item.rules : []"
        >
          <el-input
            type="textarea"
            :clearable="clearable"
            :style="item.style ? item.style : ''"
            v-model="model[item.fieldName]"
            :placeholder="item.placeholder ? item.placeholder : `请输入`"
            :disabled="item.disabled ? item.disabled : false"
            :maxlength="item.maxlength ? item.maxlength : ''"
            :minlength="item.minlength ? item.minlength : ''"
            :show-word-limit="item.showWordLimit ? item.showWordLimit : false"
            :autosize="item.autosize ? item.autosize : false"
            :rows="item.rows ? item.rows : 1"
            @change="item.change"
          >
            <template v-if="item.prefix && item.prefix != ''" #prefix>{{
              item.prefix
            }}</template>
            <template v-if="item.suffix && item.suffix != ''" #suffix>{{
              item.suffix
            }}</template>
          </el-input>
        </el-form-item>
        <el-form-item
          v-else-if="item.type === 'input'"
          :label="item.label"
          :prop="item.fieldName"
          :rules="item.rules ? item.rules : []"
        >
          <el-input
            :type="item.inputType ? item.inputType : 'text'"
            :clearable="clearable"
            :style="item.style ? item.style : ''"
            v-model.trim="model[item.fieldName]"
            :placeholder="item.placeholder ? item.placeholder : `请输入`"
            :disabled="item.disabled ? item.disabled : false"
            :maxlength="item.maxlength ? item.maxlength : ''"
            :minlength="item.minlength ? item.minlength : ''"
            :show-word-limit="item.showWordLimit ? item.showWordLimit : false"
            :autosize="item.autosize ? item.autosize : false"
            :rows="item.rows ? item.rows : 1"
            @change="item.change"
          >
            <template v-if="item.prefix && item.prefix != ''" #prefix>{{
              item.prefix
            }}</template>
            <template v-if="item.suffix && item.suffix != ''" #suffix>{{
              item.suffix
            }}</template>
          </el-input>
        </el-form-item>
        <!-- 自动补全 -->
        <el-form-item
          v-if="item.type === 'autocomplete'"
          :label="item.label"
          :prop="item.fieldName"
          :rules="item.rules ? item.rules : []"
        >
          <el-autocomplete
            :clearable="clearable"
            :style="item.style ? item.style : ''"
            v-model="model[item.fieldName]"
            :disabled="item.disabled ? item.disabled : false"
            :placeholder="item.placeholder ? item.placeholder : `请输入`"
            :fetch-suggestions="item.suggestions"
            @select="item.select"
            @change="item.change"
            @keydown="inputKeydown($event, item.DisableInput)"
          >
            <template v-if="item.prefix && item.prefix != ''" #prefix>{{
              item.prefix
            }}</template>
            <template v-if="item.suffix && item.suffix != ''" #suffix>{{
              item.suffix
            }}</template>
          </el-autocomplete>
        </el-form-item>
        <!-- 数字类型Input增加输入限制 -->
        <el-form-item
          v-if="item.type === 'inputNumber'"
          :label="item.label"
          :prop="item.fieldName"
          :rules="item.rules ? item.rules : []"
        >
          <el-input
            type="Number"
            :clearable="clearable"
            :style="item.style ? item.style : ''"
            v-model="model[item.fieldName]"
            :disabled="item.disabled ? item.disabled : false"
            :placeholder="item.placeholder ? item.placeholder : `请输入`"
            @change="item.change"
            @keydown="inputKeydown($event, item.DisableInput)"
          >
            <template v-if="item.prefix && item.prefix != ''" #prefix>{{
              item.prefix
            }}</template>
            <template v-if="item.suffix && item.suffix != ''" #suffix>{{
              item.suffix
            }}</template>
          </el-input>
        </el-form-item>
        <!-- 自带加减数字类型Input增加输入限制 -->
        <el-form-item
          v-if="item.type === 'inputNumberBtn'"
          :label="item.label"
          :prop="item.fieldName"
          :rules="item.rules ? item.rules : []"
        >
          <el-input
            type="Number"
            :clearable="clearable"
            :style="item.style ? item.style : ''"
            v-model="model[item.fieldName]"
            :disabled="item.disabled ? item.disabled : false"
            :placeholder="item.placeholder ? item.placeholder : `请输入`"
            @change="
              inputNumberBtnChange(item.fieldName, item.minNum, item.change)
            "
            ref="inputNumberBtnRef"
            @keydown="inputKeydown($event, item.DisableInput)"
          >
            <template #prepend>
              <el-button
                :disabled="
                  model[item.fieldName] <= 1 ||
                  model[item.fieldName] == '' ||
                  !model[item.fieldName] ||
                  model[item.fieldName] == undefined
                "
                style="width: 10px !important; min-width: 10px !important"
                @click="inputNumberBtnReduce(item.fieldName, item.change)"
                >-</el-button
              >
            </template>
            <template #append>
              <el-button
                style="width: 10px !important; min-width: 10px !important"
                @click="inputNumberBtnAdd(item.fieldName, item.change)"
                >+</el-button
              >
            </template>
          </el-input>
        </el-form-item>
        <!-- 范围输入框,默认为数字类型 -->
        <el-form-item
          v-if="item.type === 'inputrange'"
          :label="item.label"
          :required="item.rules ? true : false"
        >
          <el-col :span="11">
            <el-form-item
              :prop="item.fieldName[0]"
              :rules="item.rules ? item.rules : []"
            >
              <el-input
                @keydown="inputKeydown($event, item.DisableInput)"
                type="Number"
                :clearable="clearable"
                :style="item.style ? item.style : ''"
                v-model="model[item.fieldName[0]]"
                :disabled="item.disabled ? item.disabled : false"
                @change="
                  inputrangeStarChange(
                    $event,
                    item.fieldName[0],
                    item.fieldName[1]
                  )
                "
                :placeholder="
                  item.placeholder[0] ? item.placeholder[0] : `请输入`
                "
              />
            </el-form-item>
          </el-col>
          <el-col style="text-align: center" :span="2">{{
            item.rangeSeparator
          }}</el-col>
          <el-col :span="11">
            <el-form-item
              :prop="item.fieldName[1]"
              :rules="item.rules ? item.rules : []"
            >
              <el-input
                @keydown="inputKeydown($event, item.DisableInput)"
                type="Number"
                :clearable="clearable"
                :style="item.style ? item.style : ''"
                v-model="model[item.fieldName[1]]"
                :disabled="item.disabled ? item.disabled : false"
                @change="
                  inputrangeEndChange(
                    $event,
                    item.fieldName[0],
                    item.fieldName[1]
                  )
                "
                :placeholder="
                  item.placeholder[1] ? item.placeholder[1] : `请输入`
                "
              />
            </el-form-item>
          </el-col>
        </el-form-item>
        <!-- 树级选择器 -->
        <el-form-item
          v-if="item.type === 'tree'"
          :label="item.label"
          :prop="item.fieldName"
          :rules="item.rules ? item.rules : []"
        >
          <el-tree-select
            v-model="model[item.fieldName]"
            :data="item.optionList"
            :props="item.defaultProps"
            :node-key="
              item.defaultProps?.value ? item.defaultProps?.value : 'id'
            "
            :multiple="item.multiple ? item.multiple : false"
            filterable
            :check-strictly="
              item.isCheckStrictly ? item.isCheckStrictly : false
            "
            :render-after-expand="false"
            :show-checkbox="item.multiple ? item.multiple : false"
            check-on-click-node
            :placeholder="item.placeholder ? item.placeholder : `请选择`"
            :collapse-tags="item.maxCollapseTags ? true : false"
            :collapse-tags-tooltip="item.maxCollapseTags ? true : false"
            :max-collapse-tags="item.maxCollapseTags"
            :disabled="item.disabled ? item.disabled : false"
            :clearable="clearable"
            :style="item.style ? item.style : ''"
            @check="item.change"
            @change="item.change"
          />
        </el-form-item>
        <!-- 下拉框 -->
        <el-form-item
          v-if="item.type === 'select'"
          :label="item.label"
          :prop="item.fieldName"
          :rules="item.rules ? item.rules : []"
        >
          <el-select
            :filterable="item.filterable === undefined ? true : item.filterable"
            :style="item.style ? item.style : ''"
            :clearable="clearable"
            v-model="model[item.fieldName]"
            :disabled="item.disabled ? item.disabled : false"
            :placeholder="item.placeholder ? item.placeholder : `请选择`"
            :multiple="item.multiple ? item.multiple : false"
            :collapse-tags="item.collapseTags || false"
            collapse-tags-tooltip
            @change="item.change"
          >
            <el-option
              v-for="(optionItem, optionIndex) in item.optionList"
              :key="optionIndex"
              :label="optionItem.label"
              :disabled="optionItem.disabled"
              :value="
                optionItem.value === undefined
                  ? optionItem.label
                  : optionItem.value
              "
            />
          </el-select>
        </el-form-item>
        <!-- 日期时间-->
        <el-form-item
          v-if="item.type === 'date'"
          :label="item.label"
          :prop="item.fieldName"
          :rules="item.rules ? item.rules : []"
        >
          <el-date-picker
            v-model="model[item.fieldName]"
            :value-format="item.valueFormat ? item.valueFormat : 'yyyy-MM-dd'"
            :format="item.valueFormat ? item.valueFormat : 'yyyy-MM-dd'"
            :style="item.style ? item.style : ''"
            :clearable="clearable"
            :disabled="item.disabled ? item.disabled : false"
            :disabled-date="item.disabledDate ? item.disabledDate : null"
            :type="item.dataType ? item.dataType : 'date'"
            :placeholder="item.placeholder ? item.placeholder : `请选择`"
            :start-placeholder="
              item.startPlaceholder ? item.startPlaceholder : `请选择`
            "
            :end-placeholder="
              item.endPlaceholder ? item.endPlaceholder : `请选择`
            "
            @change="item.change"
          />
        </el-form-item>
        <!-- switch -->
        <el-form-item
          v-if="item.type === 'switch'"
          :label="item.label"
          :prop="item.fieldName"
          :rules="item.rules ? item.rules : []"
        >
          <el-switch
            v-model="model[item.fieldName]"
            :disabled="item.disabled ? item.disabled : false"
            :loading="item.loading ? item.loading : false"
            :active-value="item.activeValue ? item.activeValue : true"
            :inactive-value="item.inactiveValue ? item.inactiveValue : false"
            :style="`--el-switch-on-color: ${item.activeColor}; --el-switch-off-color: ${item.inactiveColor}; --el-switch-border-color: ${item.borderColor}`"
            :placeholder="item.placeholder ? item.placeholder : `请输入`"
            :before-change="item.beforeChange ? item.beforeChange : undefined"
            @change="item.change"
          />
        </el-form-item>
        <!-- 单选框 -->
        <el-form-item
          v-if="item.type === 'radio'"
          :label="item.label"
          :prop="item.fieldName"
          :rules="item.rules ? item.rules : []"
        >
          <el-radio-group
            v-model="model[item.fieldName]"
            :disabled="item.disabled ? item.disabled : false"
            :border="item.border ? item.border : false"
            @change="item.change"
          >
            <el-radio
              v-for="(optionItem, optionIndex) in item.optionList"
              :label="JSON.stringify(optionItem)"
              :key="optionIndex"
            >
              {{ optionItem.label }}
            </el-radio>
          </el-radio-group>
        </el-form-item>
        <!-- 多选框 -->
        <el-form-item
          v-if="item.type === 'checkbox' && model[item.fieldName]"
          :label="item.label"
          :prop="item.fieldName"
          :rules="item.rules ? item.rules : []"
        >
          <el-checkbox-group
            v-model="model[item.fieldName]"
            :disabled="item.disabled ? item.disabled : false"
            :min="item.min ? item.min : undefined"
            :max="item.max ? item.max : undefined"
            :text-color="item.textColor ? item.textColor : '#FFFFFF'"
            :fill="item.fill ? item.fill : '#3171F1'"
            @change="item.change"
          >
            <el-checkbox
              v-for="(optionItem, optionIndex) in item.optionList"
              :label="optionItem"
              :key="optionIndex"
            >
              {{ optionItem.label }}
            </el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <!-- 地图 -->
        <el-form-item
          v-if="item.type === 'mapInput' && model[item.fieldName]"
          :label="item.label"
          :prop="item.fieldName.address"
          :rules="item.rules ? item.rules : []"
        >
          <!-- <BaiduMap
            :placeholder="item.placeholder"
            :disabled="item.disabled ? item.disabled : false"
            :clearable="clearable"
            v-model:mapData="model[item.fieldName]"
          /> -->
        </el-form-item>
        <!-- 省市区选择 -->
        <el-form-item
          v-if="item.type === 'regionInput'"
          :label="item.label"
          :prop="item.fieldName"
          :rules="item.rules ? item.rules : []"
        >
          <el-cascader
            v-model.trim="model[item.fieldName]"
            :clearable="clearable"
            :disabled="item.disabled ? item.disabled : false"
            :placeholder="item.placeholder ? item.placeholder : `请选择`"
            :options="regionList"
            separator="-"
            :props="{
              value: 'name',
              label: 'name',
              children: 'child',
            }"
            @change="item.change"
          />
        </el-form-item>
        <!-- 上传组件 -->
        <el-form-item
          v-if="item.type === 'upload'"
          :label="item.label"
          :prop="item.fieldName"
          :rules="item.rules ? item.rules : []"
        >
          <!-- <UploadPanel
            :uploadType="item.uploadType"
            :maxLength="item.maxLength"
            :maxSize="item.maxSize"
            :disabled="item.disabled"
            :FileList="item.initValue"
            :dir="item.dir"
            :localFiles="item.localFiles"
            :project_id="item.project_id"
          /> -->
        </el-form-item>
        <!-- 选择项目人员 -->
        <!-- <el-form-item
          v-if="item.type === 'selectProjectUser'"
          :label="item.label"
          :prop="item.fieldName"
          :rules="item.rules ? item.rules : []"
        >
          <SelectProjectUser
            v-model:userList="model[item.fieldName]"
            :disabled="item.disabled"
            :placeholder="item.placeholder"
            :dialogTitle="item.dialogTitle"
            :separator="item.separator"
            :bottomCount="item.bottomCount"
            :change="item.change"
          />
        </el-form-item> -->
        <!-- 仅展示 -->
        <el-form-item
          :label-width="item.labelWidth"
          v-if="item.type === 'show'"
          :label="item.label"
          style="margin-bottom: 10px"
          class="l_formPanel_show"
        >
          <div
            :style="`line-height: 20px; ${item.style}`"
            v-if="model[item.fieldName]"
            v-html="model[item.fieldName].replace(/\n/g, '</br>')"
          ></div>
        </el-form-item>
      </el-col>
      <el-col :span="24 / Number(cols)"><slot name="after"></slot></el-col>
    </el-row>
    <template v-else>
      <el-row v-for="(item, index) in formConfig" :key="index">
        <el-col :span="item.cols && item.cols != '' ? Number(item.cols) : 24">
          <!-- input类型 -->
          <el-form-item
            v-if="item.type === 'input' && item.inputType === 'textarea'"
            :label="item.label"
            :prop="item.fieldName"
            :rules="item.rules ? item.rules : []"
          >
            <el-input
              type="textarea"
              :clearable="clearable"
              :style="item.style ? item.style : ''"
              v-model="model[item.fieldName]"
              :placeholder="item.placeholder ? item.placeholder : `请输入`"
              :disabled="item.disabled ? item.disabled : false"
              :maxlength="item.maxlength ? item.maxlength : ''"
              :minlength="item.minlength ? item.minlength : ''"
              :show-word-limit="item.showWordLimit ? item.showWordLimit : false"
              :autosize="item.autosize ? item.autosize : false"
              :rows="
                item.rows ? item.rows : item.inputType === 'textarea' ? 2 : 1
              "
              @change="item.change"
            >
              <template v-if="item.prefix && item.prefix != ''" #prefix>{{
                item.prefix
              }}</template>
              <template v-if="item.suffix && item.suffix != ''" #suffix>{{
                item.suffix
              }}</template>
            </el-input>
          </el-form-item>
          <el-form-item
            v-else-if="item.type === 'input'"
            :label="item.label"
            :prop="item.fieldName"
            :rules="item.rules ? item.rules : []"
          >
            <el-input
              :type="item.inputType ? item.inputType : 'text'"
              :clearable="clearable"
              :style="item.style ? item.style : ''"
              v-model.trim="model[item.fieldName]"
              :placeholder="item.placeholder ? item.placeholder : `请输入`"
              :disabled="item.disabled ? item.disabled : false"
              :maxlength="item.maxlength ? item.maxlength : ''"
              :minlength="item.minlength ? item.minlength : ''"
              :show-word-limit="item.showWordLimit ? item.showWordLimit : false"
              :autosize="item.autosize ? item.autosize : false"
              :rows="
                item.rows ? item.rows : item.inputType === 'textarea' ? 2 : 1
              "
              @change="item.change"
            >
              <template v-if="item.prefix && item.prefix != ''" #prefix>{{
                item.prefix
              }}</template>
              <template v-if="item.suffix && item.suffix != ''" #suffix>{{
                item.suffix
              }}</template>
            </el-input>
          </el-form-item>
          <!-- 自动补全 -->
          <el-form-item
            v-if="item.type === 'autocomplete'"
            :label="item.label"
            :prop="item.fieldName"
            :rules="item.rules ? item.rules : []"
          >
            <el-autocomplete
              :clearable="clearable"
              :style="item.style ? item.style : ''"
              v-model.trim="model[item.fieldName]"
              :disabled="item.disabled ? item.disabled : false"
              :placeholder="item.placeholder ? item.placeholder : `请输入`"
              :fetch-suggestions="item.suggestions"
              :show-word-limit="item.showWordLimit ? item.showWordLimit : false"
              @select="item.select"
              @change="item.change"
              @keydown="inputKeydown($event, item.DisableInput)"
            >
              <template v-if="item.prefix && item.prefix != ''" #prefix>{{
                item.prefix
              }}</template>
              <template v-if="item.suffix && item.suffix != ''" #suffix>{{
                item.suffix
              }}</template>
            </el-autocomplete>
          </el-form-item>
          <!-- 数字类型Input增加输入限制 -->
          <el-form-item
            v-if="item.type === 'inputNumber'"
            :label="item.label"
            :prop="item.fieldName"
            :rules="item.rules ? item.rules : []"
          >
            <el-input
              type="Number"
              :clearable="clearable"
              :style="item.style ? item.style : ''"
              v-model="model[item.fieldName]"
              :disabled="item.disabled ? item.disabled : false"
              :placeholder="item.placeholder ? item.placeholder : `请输入`"
              @change="item.change"
              @keydown="inputKeydown($event, item.DisableInput)"
            >
              <template v-if="item.prefix && item.prefix != ''" #prefix>{{
                item.prefix
              }}</template>
              <template v-if="item.suffix && item.suffix != ''" #suffix>{{
                item.suffix
              }}</template>
            </el-input>
          </el-form-item>
          <!-- 自带加减数字类型Input增加输入限制 -->
          <el-form-item
            v-if="item.type === 'inputNumberBtn'"
            :label="item.label"
            :prop="item.fieldName"
            :rules="item.rules ? item.rules : []"
          >
            <el-input
              type="Number"
              :clearable="clearable"
              :style="item.style ? item.style : ''"
              v-model="model[item.fieldName]"
              :disabled="item.disabled ? item.disabled : false"
              :placeholder="item.placeholder ? item.placeholder : `请输入`"
              @change="
                inputNumberBtnChange(item.fieldName, item.minNum, item.change)
              "
              ref="inputNumberBtnRef"
              @keydown="inputKeydown($event, item.DisableInput)"
            >
              <template #prepend>
                <el-button
                  :disabled="
                    model[item.fieldName] <= 1 ||
                    model[item.fieldName] == '' ||
                    !model[item.fieldName] ||
                    model[item.fieldName] == undefined
                  "
                  style="width: 10px !important; min-width: 10px !important"
                  @click="inputNumberBtnReduce(item.fieldName, item.change)"
                  >-</el-button
                >
              </template>
              <template #append>
                <el-button
                  style="width: 10px !important; min-width: 10px !important"
                  @click="inputNumberBtnAdd(item.fieldName, item.change)"
                  >+</el-button
                >
              </template>
            </el-input>
          </el-form-item>
          <!-- 范围输入框,默认为数字类型 -->
          <el-form-item
            v-if="item.type === 'inputrange'"
            :label="item.label"
            :required="item.rules ? true : false"
          >
            <el-col :span="11">
              <el-form-item
                :prop="item.fieldName[0]"
                :rules="item.rules ? item.rules : []"
              >
                <el-input
                  @keydown="inputKeydown($event, item.DisableInput)"
                  type="Number"
                  :clearable="clearable"
                  :style="item.style ? item.style : ''"
                  v-model="model[item.fieldName[0]]"
                  :disabled="item.disabled ? item.disabled : false"
                  @change="
                    inputrangeStarChange(
                      $event,
                      item.fieldName[0],
                      item.fieldName[1]
                    )
                  "
                  :placeholder="
                    item.placeholder[0] ? item.placeholder[0] : `请输入`
                  "
                />
              </el-form-item>
            </el-col>
            <el-col style="text-align: center" :span="2">{{
              item.rangeSeparator
            }}</el-col>
            <el-col :span="11">
              <el-form-item
                :prop="item.fieldName[1]"
                :rules="item.rules ? item.rules : []"
              >
                <el-input
                  @keydown="inputKeydown($event, item.DisableInput)"
                  type="Number"
                  :clearable="clearable"
                  :style="item.style ? item.style : ''"
                  v-model="model[item.fieldName[1]]"
                  :disabled="item.disabled ? item.disabled : false"
                  @change="
                    inputrangeEndChange(
                      $event,
                      item.fieldName[0],
                      item.fieldName[1]
                    )
                  "
                  :placeholder="
                    item.placeholder[1] ? item.placeholder[1] : `请输入`
                  "
                />
              </el-form-item>
            </el-col>
          </el-form-item>
          <!-- 树级选择器 -->
          <el-form-item
            v-if="item.type === 'tree'"
            :label="item.label"
            :prop="item.fieldName"
            :rules="item.rules ? item.rules : []"
          >
            <el-tree-select
              v-model="model[item.fieldName]"
              :data="item.optionList"
              :props="item.defaultProps"
              :node-key="
                item.defaultProps?.value ? item.defaultProps?.value : 'id'
              "
              :multiple="item.multiple ? item.multiple : false"
              filterable
              :check-strictly="
                item.isCheckStrictly ? item.isCheckStrictly : false
              "
              :render-after-expand="false"
              :show-checkbox="item.multiple ? item.multiple : false"
              check-on-click-node
              :placeholder="item.placeholder ? item.placeholder : `请选择`"
              :collapse-tags="item.maxCollapseTags ? true : false"
              :collapse-tags-tooltip="item.maxCollapseTags ? true : false"
              :max-collapse-tags="item.maxCollapseTags"
              :disabled="item.disabled ? item.disabled : false"
              :clearable="clearable"
              :style="item.style ? item.style : ''"
              @check="item.change"
              @change="item.change"
            />
          </el-form-item>
          <!-- 下拉框 -->
          <el-form-item
            v-if="item.type === 'select'"
            :label="item.label"
            :prop="item.fieldName"
            :rules="item.rules ? item.rules : []"
          >
            <el-select
              :default-first-option="
                item.defaultFirstOption ? item.defaultFirstOption : false
              "
              :filterable="
                item.filterable === undefined ? true : item.filterable
              "
              :allow-create="item.allowcreate ? item.allowcreate : false"
              :style="item.style ? item.style : ''"
              :clearable="clearable"
              v-model="model[item.fieldName]"
              :disabled="item.disabled ? item.disabled : false"
              :placeholder="item.placeholder ? item.placeholder : `请选择`"
              :multiple="item.multiple ? item.multiple : false"
              :collapse-tags="item.collapseTags || false"
              collapse-tags-tooltip
              @change="item.change"
              @remove-tag="item.remove"
            >
              <el-option
                v-for="(optionItem, optionIndex) in item.optionList"
                :key="optionIndex"
                :label="optionItem.label"
                :disabled="optionItem.disabled"
                :value="
                  optionItem.value === undefined
                    ? optionItem.label
                    : optionItem.value
                "
              />
            </el-select>
          </el-form-item>
          <!-- 日期时间-->
          <el-form-item
            v-if="item.type === 'date'"
            :label="item.label"
            :prop="item.fieldName"
            :rules="item.rules ? item.rules : []"
          >
            <el-date-picker
              v-model="model[item.fieldName]"
              :value-format="item.valueFormat ? item.valueFormat : 'yyyy-MM-dd'"
              :format="item.valueFormat ? item.valueFormat : 'yyyy-MM-dd'"
              :style="item.style ? item.style : ''"
              :clearable="clearable"
              :disabled="item.disabled ? item.disabled : false"
              :disabled-date="item.disabledDate ? item.disabledDate : null"
              :type="item.dataType ? item.dataType : 'date'"
              :placeholder="item.placeholder ? item.placeholder : `请选择`"
              :start-placeholder="
                item.startPlaceholder ? item.startPlaceholder : `请选择`
              "
              :end-placeholder="
                item.endPlaceholder ? item.endPlaceholder : `请选择`
              "
              @change="item.change"
            />
          </el-form-item>
          <!-- switch -->
          <el-form-item
            v-if="item.type === 'switch'"
            :label="item.label"
            :prop="item.fieldName"
            :rules="item.rules ? item.rules : []"
          >
            <el-switch
              v-model="model[item.fieldName]"
              :disabled="item.disabled ? item.disabled : false"
              :loading="item.loading ? item.loading : false"
              :active-value="item.activeValue ? item.activeValue : true"
              :inactive-value="item.inactiveValue ? item.inactiveValue : false"
              :style="`--el-switch-on-color: ${item.activeColor}; --el-switch-off-color: ${item.inactiveColor}; --el-switch-border-color: ${item.borderColor}`"
              :placeholder="item.placeholder ? item.placeholder : `请输入`"
              :before-change="item.beforeChange ? item.beforeChange : undefined"
              @change="item.change"
            />
          </el-form-item>
          <!-- 单选框 -->
          <el-form-item
            v-if="item.type === 'radio'"
            :label="item.label"
            :prop="item.fieldName"
            :rules="item.rules ? item.rules : []"
          >
            <el-radio-group
              v-model="model[item.fieldName]"
              :disabled="item.disabled ? item.disabled : false"
              :border="item.border ? item.border : false"
              @change="item.change"
            >
              <el-radio
                v-for="(optionItem, optionIndex) in item.optionList"
                :label="JSON.stringify(optionItem)"
                :key="optionIndex"
              >
                {{ optionItem.label }}
              </el-radio>
            </el-radio-group>
          </el-form-item>
          <!-- 多选框 -->
          <el-form-item
            v-if="item.type === 'checkbox' && model[item.fieldName]"
            :label="item.label"
            :prop="item.fieldName"
            :rules="item.rules ? item.rules : []"
          >
            <el-checkbox-group
              v-model="model[item.fieldName]"
              :disabled="item.disabled ? item.disabled : false"
              :min="item.min ? item.min : undefined"
              :max="item.max ? item.max : undefined"
              :text-color="item.textColor ? item.textColor : '#FFFFFF'"
              :fill="item.fill ? item.fill : '#3171F1'"
              @change="item.change"
            >
              <el-checkbox
                v-for="(optionItem, optionIndex) in item.optionList"
                :label="optionItem"
                :key="optionIndex"
              >
                {{ optionItem.label }}
              </el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <!-- 地图 -->
          <el-form-item
            v-if="item.type === 'mapInput' && model[item.fieldName]"
            :label="item.label"
            :prop="item.fieldName"
            :rules="item.rules ? item.rules : []"
          >
            <!-- <BaiduMap
              :placeholder="placeholder"
              :disabled="item.disabled ? item.disabled : false"
              :clearable="clearable"
              v-model:mapData="model[item.fieldName]"
            /> -->
          </el-form-item>
          <!-- 省市区选择 -->
          <el-form-item
            v-if="item.type === 'regionInput'"
            :label="item.label"
            :prop="item.fieldName"
            :rules="item.rules ? item.rules : []"
          >
            <el-cascader
              v-model.trim="model[item.fieldName]"
              :clearable="clearable"
              :disabled="item.disabled ? item.disabled : false"
              :placeholder="item.placeholder ? item.placeholder : `请选择`"
              :options="regionList"
              separator="-"
              :props="{
                value: 'name',
                label: 'name',
                children: 'child',
              }"
              @change="item.change"
            />
          </el-form-item>
          <!-- 仅展示 -->
          <el-form-item
            :label-width="item.labelWidth"
            v-if="item.type === 'show'"
            :label="item.label"
            style="margin-bottom: 10px"
            class="l_formPanel_show"
          >
            <div
              :style="`line-height: 20px; ${item.style}`"
              v-if="model[item.fieldName]"
              v-html="model[item.fieldName].replace(/\n/g, '</br>')"
            ></div>
          </el-form-item>
        </el-col>
      </el-row>
    </template>
  </el-form>
</template>
<script>
import region from "@/assets/json/region";
export default {
  name: "",
  components: {
    // UploadPanel,
    // SelectProjectUser,
  },
  props: {
    formItemWidth: {
      type: String,
      default: "",
    },
    formConfig: {
      // 表单的渲染数据，必须
      type: Array,
      default: () => {
        return [];
      },
      required: true,
    },
    // model: {
    //   // 表单数据对象
    //   type: Object,
    //   default: () => {
    //     return {};
    //   },
    // },
    // rules: { // 表单验证规则
    //   type: Object,
    // 	default: ()=> {
    // 	return {};
    // 	}
    // },
    cols: {
      // 每一行显示数量，必须可以被24整除
      type: [String, Number],
      default: 0,
    },
    inline: {
      // 行内表单模式
      type: Boolean,
      default: false,
    },
    labelPosition: {
      // 表单域标签的位置， 当设置为 left 或 right 时，则也需要设置 label-width 属性
      type: String,
      default: "right",
    },
    labelWidth: {
      // 标签的长度，例如 '50px'。 作为 Form 直接子元素的 form-item 会继承该值。 可以使用 auto。
      type: [String, Number],
      default: "100px",
    },
    labelSuffix: {
      // 表单域标签的后缀
      type: String,
      default: "",
    },
    hideRequiredAsterisk: {
      // 是否隐藏必填字段标签旁边的红色星号。
      type: Boolean,
      default: false,
    },
    requireAsteriskPosition: {
      // 星号的位置。'left' | 'right'
      type: String,
      default: "left",
    },
    showMessage: {
      // 是否显示校验错误信息
      type: Boolean,
      default: true,
    },
    inlineMessage: {
      // 是否以行内形式展示校验信息
      type: Boolean,
      default: false,
    },
    statusIcon: {
      // 是否在输入框中显示校验结果反馈图标
      type: Boolean,
      default: false,
    },
    validateOnRuleChange: {
      // 是否在 rules 属性改变后立即触发一次验证
      type: Boolean,
      default: true,
    },
    size: {
      // 用于控制该表单内组件的尺寸 '' | 'large' | 'default' | 'small'
      type: String,
      default: "",
    },
    disabled: {
      // 是否禁用该表单内的所有组件。 如果设置为 true, 它将覆盖内部组件的 disabled 属性
      type: Boolean,
      default: false,
    },
    scrollToError: {
      // 当校验失败时，滚动到第一个错误表单项
      type: Boolean,
      default: true,
    },
    scrollIntoViewOptions: {
      //当校验有失败结果时，滚动到第一个失败的表单项目 object/ boolean
      type: [Object, Boolean],
      default: "",
    },
    clearable: {
      // 是否可清空
      type: Boolean,
      default: true,
    },
  },
  setup(props) {
    const { proxy } = getCurrentInstance(); // 相当于之前的this
    const data = reactive({
      model: {},
      regionList: region,
    });
    const createFormkey = (type) => {
      let formKeyList = {};
      props.formConfig.map((item) => {
        if (typeof item.fieldName == "string") {
          formKeyList[item.fieldName] =
            item.initValue === undefined ? "" : item.initValue;
        } else {
          // 处理范围输入的key
          formKeyList[item.fieldName[0]] = item.initValue[0]
            ? item.initValue[0]
            : "";
          formKeyList[item.fieldName[1]] = item.initValue[1]
            ? item.initValue[1]
            : "";
        }
      });
      if (type && type == "update") {
        // 更新组件内容保留历史数据
        for (let key in data.model) {
          props.formConfig.map((item) => {
            if (item.fieldName == key) {
              formKeyList[key] = data.model[key];
            }
          });
        }
      }
      data.model = formKeyList;
    };
    const inputKeydown = (e, DisableInput) => {
      // 数字类型输入框禁止输入不合法字符
      let key = e.key;
      let DisableInputStr = "";
      if (DisableInput) {
        DisableInputStr = DisableInput;
      } else {
        DisableInputStr = "e,+,-,Shift";
      }
      // console.log(key, '---key')
      if (DisableInputStr.indexOf(key) > -1) {
        e.returnValue = false;
        return false;
      }
      return true;
    };
    /**
     * @description: 清除表单验证
     * proxy.$refs.FormPanelRef.clearValidate()；
     * @return {*}
     * @author:
     */
    const clearValidate = () => {
      return proxy.$refs.formPanelRef.clearValidate();
    };
    /**
     * @description: 清除指定数据，不穿清除全部
     * proxy.$refs.FormPanelRef.clearKey(['keyName'])；
     * @return {*}
     * @author:
     */
    const clearKey = (key) => {
      if (key && key.length > 0) {
        props.formConfig.map((item) => {
          key.map((keyItem) => {
            if (item.fieldName == keyItem) {
              data.model[keyItem] = item.initValue;
            }
          });
        });
      } else {
        createFormkey();
      }
    };
    /**
     * @description: 清除数据和表单验证
     * proxy.$refs.FormPanelRef.clear()；
     * @return {*}
     * @author:
     */
    const clear = () => {
      clearValidate();
      clearKey();
    };
    /**
     * @description: 设置数据
     * proxy.$refs.FormPanelRef.set('key', 'value')；
     * @return {*}
     * @author:
     */
    const set = (key, value) => {
      data.model[key] = value;
    };
    /**
     * @description: 得到数据
     * proxy.$refs.FormPanelRef.get('key')；
     * @return {*}
     * @author:
     */
    const get = (key) => {
      return data.model[key];
    };
    /**
   * @description: 验证表单并输入结果通过
	 * proxy.$refs.FormPanelRef.FormPanelValidate().then((res)=> {
        console.log(res,)
      })
   * @return {*}
   * @author: 
   */
    const validate = () => {
      // 验证结果并输出
      return new Promise((resolve, reject) => {
        proxy.$refs.formPanelRef.validate((valid) => {
          if (valid) {
            let formData = JSON.parse(JSON.stringify(proxy.model));
            resolve(formData);
          } else {
            return false;
          }
        });
      });
    };
    const inputrangeStarChange = (e, skey, eKey) => {
      // 范围查询输入框初始值
      if (proxy.model[eKey] && Number(proxy.model[eKey]) <= Number(e)) {
        if (proxy.model[eKey] > 1) {
          proxy.model[skey] = Number(proxy.model[eKey]) - 1;
        } else {
          proxy.model[skey] = 0;
        }
      }
    };
    const inputrangeEndChange = (e, skey, eKey) => {
      // 范围查询输入框结束
      if (proxy.model[skey] && Number(proxy.model[skey]) >= Number(e)) {
        proxy.model[eKey] = Number(proxy.model[skey]) + 1;
      }
    };
    const inputNumberBtnChange = (key, minNum, change) => {
      if (
        minNum &&
        data.model[key] &&
        data.model[key] != "" &&
        data.model[key] != null &&
        data.model[key] != undefined
      ) {
        if (Number(data.model[key]) < Number(minNum)) {
          data.model[key] = Number(minNum);
        }
      }
      change(data.model[key]);
    };
    const inputNumberBtnAdd = (key, change) => {
      // 数字加
      if (
        data.model[key] == "" ||
        !data.model[key] ||
        data.model[key] == null ||
        data.model[key] == undefined
      ) {
        data.model[key] = 1;
      } else {
        data.model[key] = Number(data.model[key]) + 1;
      }
      change(data.model[key]);
    };
    const inputNumberBtnReduce = (key, change) => {
      // 数字减
      data.model[key] = Number(data.model[key]) - 1;
      change(data.model[key]);
    };
    onMounted(() => {
      createFormkey();
    });
    watch(props.formConfig, (newVal, oldVal) => {
      createFormkey("update");
    });
    return {
      ...toRefs(data),
      inputKeydown,
      clearValidate,
      validate,
      inputrangeStarChange,
      inputrangeEndChange,
      inputNumberBtnAdd,
      inputNumberBtnReduce,
      inputNumberBtnChange,
      clearKey,
      clear,
      set,
      get,
    };
  },
};
</script>
<style lang="scss" scoped>
.form100 {
  :deep(.el-form-item) {
    width: 100%;
    .el-input {
      width: 100% !important;
    }
    .el-select {
      width: 100% !important;
    }
    .el-cascader {
      width: 100% !important;
    }
  }
}

.formAuto {
  :deep(.el-form-item) {
    width: auto;
    .el-input {
      width: 100% !important;
    }
    .el-select {
      width: 100% !important;
    }
    .el-cascader {
      width: 100% !important;
    }
  }
}

:deep(.el-input__prefix) {
  margin-right: 5px;
}
:deep(.el-input__suffix) {
  margin-left: 5px;
}
</style>
<style>
/* // 取消input的上下箭头 */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
  margin: 0;
}
/* 火狐 */
input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}
</style>
